<template>
  <div class="x-photos">
    <ul class="photos-items">
      <li class="photos-item" v-for="(item, index) in config"
        @mouseover="onMouseOver(item, index)"
        @mouseleave="onMouseLeave(item, index)">
        <img :src="item.image" alt="Photo">
        <div class="photo-location" v-if="item.location">
            <em v-if="item.location.lv1">{{ item.location.lv1 }}</em>
            <span v-if="item.location.lv2">{{ item.location.lv2 }}</span>
        </div>
        <transition name="fade">
          <div class="photo-more" v-if="item.active" :style="getMoreStyle(item)">
            <p class="photo-more__desc">{{ item.desc.value }}</p>
            <router-link class="photo-more__look" :to="item.to">
              <span>Look</span>
              <i class="photo-more__pointer"></i>
            </router-link>
          </div>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
  // 弃用
  export default {
    props: {
      config: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      getMoreStyle({ desc }) {
        const { top, left } = desc;

        return {
          top,
          left
        }
      },
      onMouseOver(item, index) {
        this.config = this.config.map((d, i) => {
          if(i === +index) {
            d.active = true
          } else {
            d.active = false
          }

          return d
        });
      },
      onMouseLeave(item, index) {
        this.config = this.config.map((d, i) => {
          if(i === +index) {
            d.active = false
          }
          return d
        });
      }
    }
  }
</script>
